<template>
  <div class="home">
    <div class="mainBanner">
      <el-carousel :interval="5000" arrow="always" :height="carouselHeight" :autoplay="false" @change="mainCarouselIndexChange"> 
        <el-carousel-item>
          <video
            controls
            :height="carouselHeight"
            autoplay
            src="https://hongyuanfs.oss-cn-beijing.aliyuncs.com/media/2019.1.7.《威盾温情广告》无水印.mp4" 
            poster="https://hongyuanfs.oss-cn-beijing.aliyuncs.com/uploads/2020/01/微信图片_20200110134351.jpg">
          </video>
        </el-carousel-item>
        <el-carousel-item v-for="item in banners" :key="item">
          <img :src="item" alt="mainBanner" class="innerImg" :style="{height:carouselHeight}">
          <div class="text">
            <p class="bar">致力于解决人类安居生活的防水问题</p>
            <p>COMMITTED TO SOLVING THE WATERPROOF PROBLEM OF HUMAN LIFE</p>
          </div>
          <div class="text sub">
            <p class="bar">让世界尽享品质防水带来的美好生活</p>
            <p>LET THE WORD ENJOY THE GOOD LIFE BROUGHT BY QUALITY WATERPROOF</p>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 快捷入口 -->
    <div class="entry">
      <div class="entryInner">
        <img src="@/assets/img/home/快捷入口@2x.png" alt="entryInner">
        <div class="entryContent">
          <div class="productCenter" @click="$router.push(`/products/municipal`)">
            <div class="productCenterInner">
              <img src="@/assets/img/home/产品@2x.png" alt="entry">
              <p>PRODUCT CENTER</p>
              <p>产品中心</p>
            </div>
          </div>
          <div class="buttons">
            <div 
              class="bottonItem"
              @click="goLink(item)" 
              v-for="item in entryList" 
              :key="item.cnStr">
              <img :src="item.icon" :alt="item.enStr">
              <div class="str">
                <p>{{item.enStr}}</p>
                <p>{{item.cnStr}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 公司动态 -->
    <div 
      class="news"
      :style="{'background-image':`url(${require('@/assets/img/home/地球@2x.png')})`}">
      <div class="title">
        <img src="@/assets/img/home/公司动态@2x.png" alt="title">
      </div>
      <div class="newsContent">
        <div class="left" v-if="top5">
          <el-carousel 
            :interval="4000"
            @change="i=>carouselIndex = i"
            arrow="never" 
            height="482px" 
            indicator-position="none">
            <el-carousel-item v-for="item in top5" :key="item.id">
              <img 
                v-src="{src:item.coverImg,height:480,width:630}" 
                :alt="item.title" 
                @click="goDetail(item)">
              <div class="strWrap">
                <div class="str">
                  <p>{{item.title}}</p>
                  <p>{{item.createDate.substr(0,10)}}</p>
                </div>
                <div class="progress">
                  {{carouselIndex+1}}/5
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="right" v-if="low4">
          <div class="rightInner">
            <div 
              class="rightItem" 
              v-for="item in low4" 
              :key="item.id" 
              @click="goDetail(item)">
              <img 
                v-src="{src:item.coverImg,height:200,width:315}" 
                :alt="item.title">
              <p>{{item.title}}</p>
              <p>{{item.createDate.substr(0,10)}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 合作伙伴 -->
    <div class="cooperation">
      <div class="cooperationInner">
        <div class="title"> 
          <img src="@/assets/img/home/合作伙伴@2x.png" alt="cooperation">
        </div>
        <div class="cooperationContent">
          <div 
            class="item"
            v-for="(item,i) in imglistL" 
            :key="i">
            <img :src="require(`@/assets/img/home/anli/${i + 1}.png`)" alt="friends">
            <div class="name">
              <div class="inner">{{item.name}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import request from '@/request.js';
  export default {
    name: 'home',
    data(){
      return {
        dataSource:null,
        top5:null,
        low4:null,
        carouselIndex:0,
        carouselHeight:"",
        imglistL: [
          {
            name: '中交中央公园'
          },
          {
            name: '美的巨龙君悦山庄'
          },
          {
            name: '唯一国际'
          },
          {
            name: '昆明万达广场'
          },
          {
            name: '神仙树立交'
          },
          {
            name: '峨汉高速'
          },
          {
            name: '剑榕高速'
          },
          {
            name: '成宜高速'
          },
          {
            name: '凤凰山体育中心'
          },
          {
            name: '六盘水东站'
          },
          {
            name: '西部国际博览城'
          },
          {
            name: '安顺中心城区地下综合管廊'
          },
        ]
      }
    },
    mounted(){
      this.getData();
      this.mainCarouselIndexChange();
    },
    computed:{
      entryList(){
        return [
          {
            icon:require("@/assets/img/home/技术中心@2x.png"),
            cnStr:"技术中心",
            enStr:"TECHNOLOGY CENTER",
            },
          {
            icon:require("@/assets/img/home/防水@2x.png"),
            cnStr:"防水主题公园",
            enStr:"WATERPROOF THEME PARK",
            link:""},
          {
            icon:require("@/assets/img/home/防伪@2x.png"),
            cnStr:"防伪查询",
            enStr:"SECURITY CHECK",
            link:``
          },
          {
            icon:require("@/assets/img/home/标准化施工@2x.png"),
            cnStr:"标准化施工",
            enStr:"STANDARDIZED CONSTRUCTION",
            link:`/standard/practice`
          },
          {
            icon:require("@/assets/img/home/资质荣誉@2x.png"),
            cnStr:"资质荣誉",
            enStr:"QUALIFICATION HONOR",
            link:`/introduce/honor`},
          {icon:require("@/assets/img/home/售后@2x.png"),cnStr:"售后服务",enStr:"AFTER-SALE SERVICE"},
        ]
      },
      banners(){
        return [
          require("@/assets/img/home/banner/banner3.png"),
          require("@/assets/img/home/banner/banner4.png"),
          require("@/assets/img/home/banner/banner6.png")
        ]
      }
    },
    methods:{
      mainCarouselIndexChange(idx=0){
        const width = document.documentElement.clientWidth;
        const height = document.documentElement.clientHeight;
        const innerHeight = height -128;
        this.carouselHeight = idx?innerHeight + 'px':width/1.777 + 'px';
      },
      goDetail(item){
        this.$router.push(`/news/information/0/detail?id=${item.id}`)
      },
      goLink(item){
        const {link} = item;
        if(!link) return;
        const isHttpLink = link.indexOf('http') !== -1;
        if(isHttpLink) {
          window.open(link);
        }else{
          this.$router.push(link)
        }
      },
      calcIsGrey(idx){
        const result = "";
        let row = "event";
        const parseIntIdx = parseInt(idx/6);
        const remainderIdx = idx % 6;

        if( parseIntIdx%2 !== 0) row = "odd";
        if( remainderIdx%2 !==0) {
          return row === 'odd'?'grey':'';
        }else {
          return row === 'odd'?'':'grey';
        }
      },
      getData(){
        const {type} = this.$route.query;
        //请求新闻接口
        request.get(`/pc/news/findNewsList/0?page=${1}`)
        .then(res=> {
          const list = res.data.list;
          this.top5 = list.slice(0,5);
          this.low4 = list.slice(5,9)
          console.log(this.low4)
        })
      }
    }
  }
</script>
<style lang="less" scoped>
.mainBanner {
  position: relative;
  margin-bottom: 40px;
  video {
    width: 100%;
  }
  .innerImg {
    width: 100%;
  }
  .text {
    text-align: center;
    position: relative;
    bottom: 35vh;
    &.sub{
      .bar{
        font-size: 40px;
        background-color: transparent;
        height: 60px;
      }
      p{
        font-size: 18px;
      }
    }
  }
  p {
    font-size:22px;
    font-weight:400;
    color:rgba(255,255,255,1);
    line-height:24px;
  }
  .bar {
    width:1000px;
    height:98px;
    background-color: #CF121C;
    text-align: center;
    font-size:60px;
    font-weight:400;
    color:#fff;
    line-height:98px;
    margin: 0 auto;
    margin-bottom: 20px;
  }
}
.entry {
  margin-bottom: 254px;
  .entryInner {
    margin: 0 auto;
    width: 1622px;
    max-width: 100%;
    &>img {
      width: 100%;
      height: 326px;
    }
    .entryContent {
      margin-top: 10px;
      display: flex;
      justify-content: center;
      cursor: pointer;
      user-select: none;
      .productCenter {
        box-sizing: border-box;
        width: 320px;
        height: 320px;
        flex: 0 0 320px;
        background-color: #CF121C;
        padding: 10px;
        .productCenterInner {
          width: 300px;
          height: 300px;
          border:1px solid #fff;
          box-sizing: border-box;
          padding-top: 86px;
          img {
            width: 133px;
            height: 129px;
            margin: 0 auto;
            margin-bottom: 26px;
          }
          p {
            color: #fff;
            text-align: left;
            font-size:28px;
            font-weight:bold;
            line-height:20px;
            &:nth-of-type(1) {
              font-size:18px;
              font-family:Arial;
              line-height:24px;
            }
          }
        }

      }
      .buttons {
        flex:1;
        display: flex;
        flex-wrap: wrap;
        .bottonItem {
          flex: 0 0 33.333333%;
          height: 160px;
          box-sizing: border-box;
          border:1px solid rgba(220,220,221,1);
          text-align: right;
          padding-top: 20px;
          img {
            width:110px;
            height: 110px; 
          }
          .str {
            text-align: left;
            position: relative;
            top: -50px;
            left: 16px;
            p {
              font-size:16px;
              font-family:Arial;
              font-weight:bold;
              color:rgba(51,51,51,1);
              line-height:24px;
              &:last-child {
                font-size:28px;
                font-weight:bold;
                color:rgba(51,51,51,1);
                line-height:24px;
              }
            }
          }
        }
      }
    }
  }
}
.news {
  height: 952px;
  background-size: 100% 100%;
  padding-top: 100px;
  margin-bottom: 142px;
  .title {
    margin-bottom: 70px;
    img {
      width: 436px;
      height: 88px;
    }
  }
  .newsContent {
    width: 1280px;
    max-width: 100%;
    height: 482px;
    background-color: #142040;
    margin: 0 auto;
    display: flex;
    .left {
      width:100%;
      flex: 1; 
      position: relative;
      .strWrap {
        box-sizing: border-box;
        width: 630px;
        height: 49px;
        background-color: rgba(0,0,0,.5);
        z-index: 5;
        position: absolute;
        left: 0;
        bottom: 0;
        text-align: left;
        padding-top: 10px;
        padding-left: 16px;
        display: flex;
        .progress {
          flex: 0 0 40px;
          width: 55px;
          padding-right: 15px;
          line-height: 49px;
          color: #fff;
        }
      }
      .str {
        flex:1;
        p {
          font-size:12px;
          font-weight:400;
          color:rgba(255,255,255,1);
          line-height:18px;
          &:last-child {
            color:#999999;
          }
        }
      }
      img {
        height: 480px;
        cursor: pointer;
      }
    }
    .right {
      flex:1;
      padding-left:8px;
      .rightInner {
        display: flex;
        flex-wrap: wrap;
      }
      .rightItem {
        flex: 0 0 315px;
        width: 315px;
        margin-right: 6px;
        overflow: hidden;
        cursor: pointer;
        margin-bottom: 10px;
        &:nth-of-type(2n) {
          margin-right: 0;
        }
        img {
          height: 200px;
        }
        p {
          text-align: left;
          width: 100%;
          font-size:12px;
          font-weight:400;
          color:rgba(255,255,255,1);
          line-height:1;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          &:last-child {
            font-size:12px;
            font-weight:400;
            color:rgba(102,102,102,1);
            line-height:1;
            margin-top: 4px;
          }
        }
      }
    }
  }
}
// .cooperation {
//   margin-bottom: 220px;
//   .cooperationInner {
//     margin: 0 auto;
//     width: 1285px;
//     max-width: 100%;
//     .title {
//       height: 195px;
//       margin-bottom: 44px;
//       img {
//         width: 100%;
//         height: 100%;
//       }
//     }
//     .cooperationContent {
//       display: flex;
//       flex-wrap: wrap;
//       .item {
//         flex: 0 0 16.666667%;
//         height: 80px;
//         background-color: #fff;
//         img {
//           width: 213px;
//           height: 80px;
//         }
//       }
//       .grey {
//         background-color: #F0F0F0;
//       }
//     }
//   }
// }
.cooperation{
  margin-bottom: 220px;
  .cooperationInner {
    margin: 0 auto;
    width: 1285px;
    max-width: 100%;
    .title {
      height: 195px;
      margin-bottom: 44px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .cooperationContent{
      display: flex;
      flex-wrap: wrap;
      .item{
        flex: 0 0 24%;
        margin: 0 0.5%;
        position: relative;
        box-sizing: border-box;
        padding: 5px;
        background-color: #eee;
        padding-bottom: 40px;
        margin-bottom: 20px;
        // .name{
        //   text-align: center;
        //   color: #ffffff;
        //   position: absolute;
        //   left: 0;
        //   top: 0;
        //   right: 0;
        //   bottom: 0;
        //   background-color: rgba(0,0,0,.3);
        //   font-size: 24px;
        //   font-weight: bold;
        //   display: flex;
        //   justify-content: center; /* 水平居中 */
        //   align-items: center;     /* 垂直居中 */
        //   cursor: pointer;
        //   .inner{
        //     width: 80%;
        //     height: 60%;
        //     border: 2px solid #ffffff;
        //     text-align: center;
        //     display: flex;
        //     justify-content: center; /* 水平居中 */
        //     align-items: center;     /* 垂直居中 */
        //   }
        // }
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
